<template>
  <el-container style="height: 90vh;">
    <el-header style="background-color: #fff; padding: 20px;">
      <h2>{{ chatRoom.name }} 的聊天内容</h2>
    </el-header>

    <el-main>
      <div v-if="chatRoom">
        <!-- 显示聊天内容 -->
        <div v-for="message in chatRoom.messages" :key="message">
          <p>{{ message }}</p>
        </div>
        <el-button @click="backToList">返回聊天室列表</el-button>
      </div>
      <div v-else>
        <p>加载聊天室信息中...</p>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const chatRoom = ref(null);

// 模拟从 API 获取聊天室数据
const fetchChatRoom = (id) => {
  const rooms = [
    { id: 1, name: '工作群', messages: ['任务分配', '周会安排'] },
    { id: 2, name: '家庭群', messages: ['周末聚会', '假期计划'] },
    { id: 3, name: '朋友群', messages: ['今晚吃饭', '下次聚会'] },
  ];
  return rooms.find(room => room.id === id);
};

// 获取聊天室数据
onMounted(() => {
  const chatId = Number(route.params.id); // 获取 URL 参数
  chatRoom.value = fetchChatRoom(chatId);
});

// 返回聊天室列表
function backToList() {
  router.push({ name: 'ChatList' });
}
</script>

<style scoped>
.el-header {
  text-align: center;
}

.el-main {
  padding: 20px;
}

.el-button {
  margin-top: 20px;
  display: inline-block;
}
</style>